<template>
  <div class="container">
      <el-row>
      <el-col :span="16" :offset="4">
          <el-row class="navbar">
            <el-col :offset="4">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/product' }">产品中心</el-breadcrumb-item>
                <el-breadcrumb-item>产品列表</el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :offset="4" :span="20">
              <p></p>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
                <el-menu
                  default-active="0"
                  class="el-menu-vertical-demo"
                  @select="handleSelect">
                  <el-menu-item index="0">
                    <i class="el-icon-postcard"></i>
                    <span slot="title">所有产品</span>
                  </el-menu-item>
                  <el-menu-item index="1">
                    <i class="el-icon-s-cooperation"></i>
                    <span slot="title">A类产品</span>
                  </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="20">
              <el-row :gutter="25" class="productbox">
                <el-col :span="8">
                    <div class="productitem">
                        <a href="/productdetail/1">
                            <img src="../assets/logo.png" alt="">
                            <p>紫外线光催化二氧化钛（AOT）</p>
                        </a>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="productitem">
                        <a href="/productdetail/14">
                            <img src="../assets/logo.png" alt="">
                            <p>紫外线光催化二氧化钛（AOT）</p>
                        </a>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="productitem">
                        <a href="/#">
                            <img src="../assets/logo.png" alt="">
                            <p>紫外线光催化二氧化钛（AOT）</p>
                        </a>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="productitem">
                        <a href="/#">
                            <img src="../assets/logo.png" alt="">
                            <p>紫外线光催化二氧化钛（AOT）</p>
                        </a>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="productitem">
                        <a href="/#">
                            <img src="../assets/logo.png" alt="">
                            <p>紫外线光催化二氧化钛（AOT）</p>
                        </a>
                    </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="20">
                <el-row type="flex" justify="end">
                    <el-col :span="20">
                        <Pagination :total="45" @switch-page="switchPage"/>
                    </el-col>
                </el-row>
            </el-col>
          </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "product",
  data(){
      return{
          reqParm:{
                pageNum: 1,
                total: 0,
            }
      }
  },
  methods:{
      handleSelect(){},
      switchPage(value){
          this.reqParm.pageNum=value
      }
  }
};
</script>

<style lang="scss" scoped>
.container{
    .navbar{
        margin: 20px 0px;
        p{
            height: 10px;
            border-bottom: 2px solid #ccc;
        }
    }
    .productbox{
        min-height: 250px;
        .productitem{
            border:1px solid #cbcbcb;
            margin: 10px 0px;
            padding: 0px 3px;
            text-align: center;
            a{
                text-decoration: none;
            }
            p{
                font-weight: bold;
            }
        }
    }
}
</style>